<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
    <!--Incluyendo ExtJS -->
    <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">	
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>

	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.QuickTips.init();
			var testPanel = new Ext.FormPanel({ 
				url:'login.asp', 
				frame:true, 
				labelWidth: 80,
				defaultType:'textfield',
 
				// This is the only thing you need to include for auto expanding to work!
				plugins: [new Ext.ux.form.FieldAutoExpand()],
 
 
 
				items:[
					{
						fieldLabel: 'First field',
						width: 200,
						value: 'field with fixed width...'
					},
					{
						fieldLabel: 'Second field',
						validationEvent: false,
						value: 'field with auto width and no validation'
					},
					{
						fieldLabel: 'Third field',
						minLength: 50,
						value: 'field with auto width and minLenght 50'
					},
					{
						fieldLabel: 'Fourth field',
						validator: function(){return false},
						msgTarget: 'side',
						value: 'always invalid field with validation icon on right'
					},
					{
						fieldLabel: 'Fifth field',
						validator: function(){return false},
						hideLabel: true,
						msgTarget: 'side',
						value: 'always invalid field with no label and validation icon on right'
					},
					{
						fieldLabel: 'Sixth field',
						validator: function(){return false},
						hideLabel: true,
						msgTarget: 'title',
						value: 'always invalid field with no label and validation as html title'
					},
					{
						fieldLabel: 'Seventh field',
						msgTarget: 'side',
						xtype:'combo',
						value: 'Combo with with validation validation icon on right'
					},
					{
						fieldLabel: 'Eight field',
						msgTarget: 'title',
						xtype:'combo',
						value: 'Combo with with validation message as html title'
					},
					{
						fieldLabel: 'Nineth field',
						msgTarget: 'title',
						xtype:'textarea',
						value: 'This is mighty big textarea, also expanding'
					}
				]
			});
 
			var testWindow = new Ext.Window({
				layout: 'fit',
				width: 500,
				height: 400,
				title:'Form FieldAutoExpand test',
				closable: false,
				resizable: true,
				collapsible: false,
				maximizable: true,
				items:[testPanel],
				bbar:['Try to resize this window to see how fields automatically adjust their width...']
			});
			testWindow.show();
 
		});
	</script>
	</head>
	<body></body>
</html>